<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头像修改</title>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
</head>
<body>
<div class="x-body"  style="position: absolute;left:30%;top:20%">
    <form class="layui-form">
        <input type="hidden" name="url" class="image"  id="url">
        <div class="layui-form-item">
            <label class="layui-form-label ">照片:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传头像</button>
                <div class="layui-upload-list" style="margin-left: 100px">
                    <img class="layui-upload-img" id="demo1" width="200" height="100" >
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" onclick="saveHead()">保存</button>
             </div>

        </div>
    </form>
</div>
</body>
</html>
<script>

    //保存方法
    function saveHead(){
        //获取图片路径
        var url=$("#url").val();
        console.log(url);
        //发送 ajax请求
        $.ajax({
            url:"/user/saveHead",
            type:"get",
            data:{"userPhoto":url},
            dataType:"json",
            success:function (data) {
                if (data.info=="保存成功"){
                    layer.alert("保存成功",function () {
                        //1 关闭弹窗
                        //获得frame索引
                        var index=parent.layer.getFrameIndex(window.name);
                        //关闭frame索引
                        parent.layer.close(index);

                        //2 更改当前用户头像
                        parent.$("#head").attr("src",url);
                    })
                }else{
                    layer.alert("保存失败");
                }
            }
        })
    }

    /*加载layui文件上传组件*/
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1' // 鼠标点击事件绑定按钮元素
            ,url: '/user/upload' //服务端地址
            ,accept:'images' //上传文件类型 可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            ,size:50000  //文件大小 单位是kb
            ,before: function(obj){ // 不管上传成功 还是失败 ，都需要执行的函数
                obj.preview(function(index, file, result){
                    //显示上传图片
                    $('#demo1').attr('src', result);
                });
            }
            ,done: function(res){  //访问服务端后的执行的函数
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的提示信息
                var demoText = $('#demoText');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                var fileupload = $(".image");
                //把图片在项目中的路径存入到 属性 class=image的input框中
                fileupload.attr("value",res.src);
                console.log(fileupload.attr("value"));

                // 上面等同于下面这个代码
                $("#url").val(res.src);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });

</script>